<template>
  <div class="tag">
    <el-tag 
    v-for="(item,index) in tags" 
    type="primary" 
    :closable="!!index"
    :key="item.path"
    :effect="activePath===item.path?'dark':'plain'"
    @click="goPage(item.path)"
    @close="handleClose(index)"
    style="margin:5px 5px 5px 0px ;"
    >
    {{ item.name}}
  </el-tag>
  </div>
</template>

<script setup>
import { reactive, ref, watch} from 'vue';
import { useRoute,useRouter } from 'vue-router'
const route = useRoute();
const router = useRouter();
const tags = reactive([])
const activePath=ref("")


watch(
  ()=>route,
  (to)=>{
    activePath.value=to.fullPath
  // 判断是否存在，防止重复添加
  const hasTag = tags.find((item) => item.path === to.fullPath)
  if (!hasTag) {
    tags.push({
      name: to.meta.title,
      path: to.fullPath
    })
  }
  },
  {
    deep:true,
    immediate:true,
  }
)

// 跳转路由
const goPage=(path)=>{
  router.push(path)
}

// 关闭tag
const handleClose=(idx)=>{
  tags.splice(idx,1)
  router.push(tags[idx-1].path)
}

</script>

<style lang="less" scoped>
.tag{
  margin-top: 5px;
  border: 1px solid #ffffff;
  // height: 100%;
  width: 100%;
  line-height: 1;
  // border-radius: 5px; /* 圆角 */
  // box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* 好看的阴影效果 */
  
}
</style>